<template>
  <div class="app-container home">
    <el-row>
      <el-col :span="18">
        <el-row>
          <h3 class="section-title">概览</h3>
          <el-col :span="6" v-for="item in overviewItems" :key="item.title" class="info-card">
            <h5>{{ item.title }} (元)</h5>
            <p>{{ item.value }}</p>
          </el-col>
        </el-row>

        <el-row>
          <h3 class="section-title">销售新增</h3>
          <el-col :span="6" v-for="sale in salesData" :key="sale.title" class="info-card">
            <h5>{{ sale.title }}</h5>
            <p>今日笔数: {{ sale.todayCount }}</p>
            <p>金额: {{ sale.todayAmount }}元</p>
          </el-col>
        </el-row>
        <el-row>
          <h3 class="section-title">采购新增</h3>
          <el-col :span="6" v-for="purchase in purchaseData" :key="purchase.title" class="info-card">
            <h5>{{ purchase.title }}</h5>
            <p>今日笔数: {{ purchase.todayCount }}</p>
            <p>金额: {{ purchase.todayAmount }}元</p>
          </el-col>
        </el-row>
        <el-row>
          <h3 class="section-title">销售退货新增</h3>
          <el-col :span="6" v-for="returnItem in saleReturnData" :key="returnItem.title" class="info-card">
            <h5>{{ returnItem.title }}</h5>
            <p>今日笔数: {{ returnItem.todayCount }}</p>
            <p>今日金额: {{ returnItem.todayAmount }}元</p>
          </el-col>
        </el-row>
        <el-row>
          <h3 class="section-title">采购退货新增</h3>
          <el-col :span="6" v-for="returnItem in payReturnData" :key="returnItem.title" class="info-card">
            <h5>{{ returnItem.title }}</h5>
            <p>今日笔数: {{ returnItem.todayCount }}</p>
            <p>今日金额: {{ returnItem.todayAmount }}元</p>
          </el-col>
        </el-row>
        <el-row>
          <h3 class="section-title">客户与供应商</h3>
          <el-col :span="6" v-for="item in cusSupplierItems" :key="item.title" class="info-card">
            <h5>{{ item.title }} (个)</h5>
            <p>{{ item.value }}</p>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <el-card class="document-card">
          <h5>处理中主要单据</h5>
          <el-table :data="documentData" style="width: 100%">
            <el-table-column prop="type" label="类型"></el-table-column>
            <el-table-column prop="inProgress" label="已提交"></el-table-column>
            <el-table-column prop="pendingApproval" label="已审批"></el-table-column>
            <el-table-column prop="executing" label="执行完"></el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {
  getAllPrice,
  getAllAmount,
  getAllMustPay,
  getSupCount,
  getCusCount,
  getSaleOrderCount,
  getSaleOrderReciveCountAndMoney,
  getSaleOrderReciveOrderCountAndMoney,
  getBuyOrderCountAndMoney,
  getBuyCountAndMoney,
  getBuyPayCountAndMoney,
  getSaleBackCountAndMoney,
  getPaySaleBackCountAndMoney,
  getSaleBuckPayCountAndMoney,
  getBuyBackCountAndMoney,
  getBuyBackReciveCountAndMoney,
  getBuyBackReciveOrderCountAndMoney,
  getSaleOrderThreeCountToIndex,
  getReceiveOrderThreeCountToIndex
} from "@/api/index/index";

export default {
  data() {
    return {
      overviewItems: [
        { title: '库存总价值', value: '0' },
        { title: '当前应收', value: '0' },
        { title: '当前应付', value: '0' },
      ],
      cusSupplierItems: [
        { title: '客户数量', value: '0' },
        { title: '供应商数量', value: '0' },
      ],
      salesData: [
        { title: '订单', todayCount: 0, todayAmount: '0.00' },
        { title: '销售应收', todayCount: 0, todayAmount: '0.00' },
        { title: '销售收款', todayCount: 0, todayAmount: '0.00' },
      ],
      purchaseData: [
        { title: '采购', todayCount: 0, todayAmount: '0.00' },
        { title: '采购应付', todayCount: 0, todayAmount: '0.00' },
        { title: '采购付款', todayCount: 0, todayAmount: '0.00' },
      ],
      saleReturnData: [
        { title: '销售退货', todayCount: 0, todayAmount: '0.00' },
        { title: '销售退货应付', todayCount: 0, todayAmount: '0.00' },
        { title: '销售退货付款', todayCount: 0, todayAmount: '0.00' },
      ],
      payReturnData: [
        { title: '采购退货', todayCount: 0, todayAmount: '0.00' },
        { title: '采购退货应收', todayCount: 0, todayAmount: '0.00' },
        { title: '采购退货收款', todayCount: 0, todayAmount: '0.00' },
      ],
      documentData: [
        { type: '销售订单', inProgress: 0, pendingApproval: 0, executing: 0 },
        { type: '出库单', inProgress: 35, pendingApproval: 12, executing: 18 },
        { type: '应收单', inProgress: 3, pendingApproval: 1, executing: 14 },
        { type: '收款单', inProgress: 11, pendingApproval: 5, executing: 8 },
        { type: '采购申请', inProgress: 37, pendingApproval: 9, executing: 114 },
        { type: '采购订单', inProgress: 23, pendingApproval: 6, executing: 54 },
        { type: '入库单', inProgress: 101, pendingApproval: 37, executing: 60 },
        { type: '应付单', inProgress: 3, pendingApproval: 2, executing: 51 },
        { type: '付款申请', inProgress: 6, pendingApproval: 4, executing: 9 },
        { type: '付款单', inProgress: 3, pendingApproval: 8, executing: 11 },
        { type: '库存盘点', inProgress: 24, pendingApproval: 4, executing: 0 },
      ],
    };
  },
  mounted() {
    this.getAllData();
  },
  methods: {
    // 获取所有数据
    getAllData() {
      this.getAllPrice();
      this.getAllAmount();
      this.getAllMustPay();
      this.getCusCount();
      this.getSupCount();
      this.getSaleOrderCount();
      this.getSaleOrderReciveCountAndMoney();
      this.getSaleOrderReciveOrderCountAndMoney();
      this.getBuyOrderCountAndMoney();
      this.getBuyCountAndMoney();
      this.getBuyPayCountAndMoney();
      this.getSaleBackCountAndMoney();
      this.getPaySaleBackCountAndMoney();
      this.getSaleBuckPayCountAndMoney();
      this.getBuyBackCountAndMoney();
      this.getBuyBackReciveCountAndMoney();
      this.getBuyBackReciveOrderCountAndMoney();
      this.getSaleOrderThreeCountToIndex();
      this.getReceiveOrderThreeCountToIndex();
    },
    //获取付款单各阶段订单数量
    getReceiveOrderThreeCountToIndex(){
      getReceiveOrderThreeCountToIndex().then(res => {
        this.documentData[9].inProgress = res.data.inProgress;
        this.documentData[9].pendingApproval = res.data.pendingApproval;
        this.documentData[9].executing = res.data.executing;
      })
    },
    //获取销售订单各阶段订单数量
    getSaleOrderThreeCountToIndex(){
      getSaleOrderThreeCountToIndex().then(res => {
        this.documentData[0].inProgress = res.data.inProgress;
        this.documentData[0].pendingApproval = res.data.pendingApproval;
        this.documentData[0].executing = res.data.executing;
      })
    },
       // 获取采购退货收款笔数及金额
    getBuyBackReciveOrderCountAndMoney(){
      getBuyBackReciveOrderCountAndMoney().then(res => {
        this.payReturnData[2].todayCount = res.data.count;
        this.payReturnData[2].todayAmount = res.data.money;
        this.payReturnData[2].todayAmount = this.payReturnData[2].todayAmount.toFixed(2);
      })
    },
    // 获取采购退货应收笔数及金额
    getBuyBackReciveCountAndMoney(){
      getBuyBackReciveCountAndMoney().then(res => {
        this.payReturnData[1].todayCount = res.data.count;
        this.payReturnData[1].todayAmount = res.data.money;
        this.payReturnData[1].todayAmount = this.payReturnData[1].todayAmount.toFixed(2);
      })
    },
    //获取采购退货订单笔数及金额
    getBuyBackCountAndMoney(){
      getBuyBackCountAndMoney().then(res => {
        this.payReturnData[0].todayCount = res.data.count;
        this.payReturnData[0].todayAmount = res.data.money;
        this.payReturnData[0].todayAmount = this.payReturnData[0].todayAmount.toFixed(2);
      })
    },
    // 获取当日销售退货应付笔数及金额
    getSaleBuckPayCountAndMoney() {
      getSaleBuckPayCountAndMoney().then(res => {
        this.saleReturnData[2].todayCount = res.data.count;
        this.saleReturnData[2].todayAmount = res.data.money;
        this.saleReturnData[2].todayAmount = this.saleReturnData[2].todayAmount.toFixed(2);
      })
    },
    // 获取当日销售退货应付笔数及金额
    getPaySaleBackCountAndMoney() {
      getPaySaleBackCountAndMoney().then(res => {
        this.saleReturnData[1].todayCount = res.data.count;
        this.saleReturnData[1].todayAmount = res.data.money;
        this.saleReturnData[1].todayAmount = this.saleReturnData[1].todayAmount.toFixed(2);
      })
    },
    // 获取当日销售退货笔数及金额
    getSaleBackCountAndMoney() {
      getSaleBackCountAndMoney().then(res => {
        this.saleReturnData[0].todayCount = res.data.count;
        this.saleReturnData[0].todayAmount = res.data.money;
        this.saleReturnData[0].todayAmount = this.saleReturnData[0].todayAmount.toFixed(2);
      })
    },
    // 获取当日采购付款笔数及金额
    getBuyPayCountAndMoney() {
      getBuyPayCountAndMoney().then(res => {
        this.purchaseData[2].todayCount = res.data.count;
        this.purchaseData[2].todayAmount = res.data.money;
        this.purchaseData[2].todayAmount = this.purchaseData[2].todayAmount.toFixed(2);
      })
    },
    //获取当日采购应付笔数及金额
    getBuyCountAndMoney() {
      getBuyCountAndMoney().then(res => {
        this.purchaseData[1].todayCount = res.data.count;
        this.purchaseData[1].todayAmount = res.data.money;
        this.purchaseData[1].todayAmount = this.purchaseData[1].todayAmount.toFixed(2);
      })
    },
    // 获取当日采购订单笔数及金额
    getBuyOrderCountAndMoney() {
      getBuyOrderCountAndMoney().then(res => {
        this.purchaseData[0].todayCount = res.data.count;
        this.purchaseData[0].todayAmount = res.data.money;
        this.purchaseData[0].todayAmount = this.purchaseData[0].todayAmount.toFixed(2);
      })
    },
    // 获取销售订单今日笔数及金额
    getSaleOrderCount() {
      getSaleOrderCount().then(res => {
        this.salesData[0].todayCount = res.data.count;
        this.salesData[0].todayAmount = res.data.money;
        this.salesData[0].todayAmount = this.salesData[0].todayAmount.toFixed(2);
      })
    },
    // 查询当天销售应收笔数及金额
    getSaleOrderReciveCountAndMoney() {
      getSaleOrderReciveCountAndMoney().then(res => {
        this.salesData[1].todayCount = res.data.count;
        this.salesData[1].todayAmount = res.data.money;
        this.salesData[1].todayAmount = this.salesData[1].todayAmount.toFixed(2);
      })
    },
    // 获取今日销售收款单笔数及金额
    getSaleOrderReciveOrderCountAndMoney() {
      getSaleOrderReciveOrderCountAndMoney().then(res => {
        this.salesData[2].todayCount = res.data.count;
        this.salesData[2].todayAmount = res.data.money;
        this.salesData[2].todayAmount = this.salesData[2].todayAmount.toFixed(2);
      })
    },
    // 获取客户数量
    getCusCount() {
      getCusCount().then(res => {
        this.cusSupplierItems[0].value = res.data;
      });
    },
    // 获取供应商数量
    getSupCount() {
      getSupCount().then(res => {
        this.cusSupplierItems[1].value = res.data;
      });
    },
    // 获取当前库存价值
    getAllPrice() {
      getAllPrice().then(res => {
        this.overviewItems[0].value = res.data;
        this.overviewItems[0].value = this.overviewItems[0].value.toFixed(2);
      });
    },
    // 获取当前所有应收
    getAllAmount() {
      getAllAmount().then(res => {
        this.overviewItems[1].value = res.data;
        this.overviewItems[1].value = this.overviewItems[1].value.toFixed(2);
      });
    },
    // 获取当前所有应付
    getAllMustPay() {
      getAllMustPay().then(res => {
        this.overviewItems[2].value = res.data;
        this.overviewItems[2].value = this.overviewItems[2].value.toFixed(2);
      });
    },
  },
};
</script>
<style scoped>
.dashboard {
  padding: 20px;
  max-width: 100%;
  margin: 0 auto;
}

.info-card {
  background: #fff;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 5px;
  margin-bottom: 20px;
}

.info-card:last-child {
  margin-right: 0;
}

.section-title {
  font-size: 1.5em;
  margin-bottom: 15px;
  color: #343a40;
}

.document-card {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
